<template>
  <el-row :gutter="10">
    <el-col class="right-main pain" :lg="24">
      <p class="where">
        当前位置:
        <span>首页 > 音像查看</span>
      </p>
      <template>
        <el-tabs v-model="activeName">
          <el-tab-pane label="全部图书" name="first">
            <el-row class="list">
              <el-col :span="17" class="list-li">
                <el-row class="content">
                  <el-col :span="24">
                    <p class="name">{{data.resources.title}}</p>
                   <video :src="data.resources.path" controls  preload="metadata" :poster="data.resources.cover"></video>
                    <p class="icon">
                      <el-row>
                        <el-col :span="4" :offset="12" class="center">
                          <img :src="liulan" alt />
                          {{data.resources.clicks}}
                        </el-col>
                        <el-col :span="4" class="center">
                          <img :src="pinglun" alt />
                          {{data.resources.comments}}
                        </el-col>
                        <el-col
                          :span="3"
                          class="center"
                          :class="data.resources.collection=='y'?state:''"
                        >
                          <i
                            @click="collections(index)"
                            class="el-icon-star-on"
                            :class="data.resources.collection=='y'?state:''"
                          ></i>
                          {{data.resources.collection=='y'?'已收藏':'收藏'}}
                        </el-col>
                      </el-row>
                    </p>
                  </el-col>
                  <el-col :span="24" class="comments">
                    <el-row>
                      <el-input type="textarea" :rows="4" placeholder="文明发言，抵制低俗" v-model="content"></el-input>
                      <el-col :span="4" :offset="20" align="right" style="padding-top:25px">
                        <el-button @click.native="published">发表评论</el-button>
                      </el-col>
                    </el-row>
                    <el-row class="all talk">
                      <template>
                        <div>
                          <span>全部评论</span>
                          <el-divider></el-divider>
                        </div>
                      </template>
                      <el-col :span="24" v-if="talks.length==0">
                        <!-- 评论列表 -->
                        <div v-if="data.comment.length>0">
                          <el-row class="pl-list" v-for="(v,index1) in data.comment" :key="index1">
                            <el-col :span="2">
                              <el-avatar icon="el-icon-user-solid"></el-avatar>
                            </el-col>
                            <el-col :span="19">
                              <p>
                                <span class="person">{{v.children_name}}</span> 2小时前
                              </p>
                              <p>{{v.content}}</p>
                              <el-row v-for="(k,index2) in v.children" :key="index2">
                                <el-col :span="20" :offset="1">
                                  <p>
                                    <span class="person">{{k.children_name}}</span>回复
                                    <span class="person">{{k.parent_name}}</span>
                                  </p>
                                  <div class="message">{{k.content}}</div>
                                </el-col>
                                <el-col :span="3">
                                  <el-button @click="hf2(index1,index2)" v-if="children!=k.id">回复</el-button>
                                  <el-button @click="qx2(index2)" v-else>取消回复</el-button>
                                </el-col>
                                <transition name="el-fade-in-linear">
                                  <el-col :span="24" v-show="children==k.id">
                                    <el-input
                                      type="textarea"
                                      :rows="2"
                                      :placeholder="somebody2"
                                      v-model="msgChild"
                                    ></el-input>
                                    <el-col
                                      :span="4"
                                      :offset="20"
                                      align="right"
                                      style="padding-top:25px"
                                    >
                                      <el-button @click.native="qd2(index1,index2)">确定</el-button>
                                    </el-col>
                                  </el-col>
                                </transition>
                              </el-row>
                            </el-col>
                            <el-col :span="3" align="right">
                              <el-button @click="hf1(index1)" v-if="parents!=v.id">回复</el-button>
                              <el-button @click="qx1(index1)" v-else>取消回复</el-button>
                            </el-col>
                            <transition name="el-fade-in-linear">
                              <el-col :span="24" v-show="parents==v.id">
                                <el-input
                                  type="textarea"
                                  :rows="2"
                                  :placeholder="somebody1"
                                  v-model="msg"
                                ></el-input>
                                <el-col
                                  :span="4"
                                  :offset="20"
                                  align="right"
                                  style="padding-top:25px"
                                >
                                  <el-button @click.native="qd1(index1)">确定</el-button>
                                </el-col>
                              </el-col>
                            </transition>
                          </el-row>
                          <el-row class="more" v-if="more==false" @click.native="showMore">
                            查看更多评论
                            <i class="el-icon-arrow-down"></i>
                          </el-row>
                        </div>

                        <div v-else>
                          <el-row>暂无评论</el-row>
                        </div>
                      </el-col>
                      <el-col v-else>
                        <el-row class="pl-list" v-for="(v,index1) in talks" :key="index1">
                          <el-col :span="2">
                            <el-avatar icon="el-icon-user-solid"></el-avatar>
                          </el-col>
                          <el-col :span="19">
                            <p>
                              <span class="person">{{v.children_name}}</span> 2小时前
                            </p>
                            <p>{{v.content}}</p>
                            <el-row v-for="(k,index2) in v.children" :key="index2">
                              <el-col :span="20" :offset="1">
                                <p>
                                  <span class="person">{{k.children_name}}</span>回复
                                  <span class="person">{{k.parent_name}}</span>
                                </p>
                                <div class="message">{{k.content}}</div>
                              </el-col>
                              <el-col :span="3">
                                <el-button
                                  type="text"
                                  @click="hf2(index1,index2)"
                                  v-if="children!=k.id"
                                >回复</el-button>
                                <el-button @click="qx2(index2)" v-else>取消回复</el-button>
                              </el-col>
                              <transition name="el-fade-in-linear">
                                <el-col :span="24" v-show="children==k.id">
                                  <el-input
                                    type="textarea"
                                    :rows="2"
                                    :placeholder="somebody2"
                                    v-model="msgChild"
                                  ></el-input>
                                  <el-col
                                    :span="4"
                                    :offset="20"
                                    align="right"
                                    style="padding-top:25px"
                                  >
                                    <el-button @click.native="qd2(index1,index2)">确定</el-button>
                                  </el-col>
                                </el-col>
                              </transition>
                            </el-row>
                          </el-col>
                          <el-col :span="3" align="right">
                            <el-button @click="hf1(index1)" v-if="parents!=v.id">回复</el-button>
                            <el-button @click="qx1(index1)" v-else>取消回复</el-button>
                          </el-col>
                          <transition name="el-fade-in-linear">
                            <el-col :span="24" v-show="parents==v.id">
                              <el-input
                                type="textarea"
                                :rows="2"
                                :placeholder="somebody1"
                                v-model="msg"
                              ></el-input>
                              <el-col :span="4" :offset="20" align="right" style="padding-top:25px">
                                <el-button @click.native="qd1(index1)">确定</el-button>
                              </el-col>
                            </el-col>
                          </transition>
                        </el-row>
                        <el-row class="total">
                          <el-pagination background layout="prev, pager, next" @current-change="handleCurrentChange" :page-size="3" :total="total"></el-pagination>
                        </el-row>
                      </el-col>
                    </el-row>
                  </el-col>
                </el-row>
              </el-col>
              <el-col :span="6" :offset="1" class="right-box">
                <el-row>
                  <div class="new-title">
                    <span>资源信息</span>
                  </div>
                  <div class="pan">
                    <p>作者：{{data.information.author}}</p>
                    <p>
                      分类：
                      <el-button round>{{data.information.category_name}}</el-button>
                    </p>
                    <p>出版单位：{{data.information.publisher}}</p>
                    <p>文件大小：{{data.information.filesize}}kb</p>
                    <p>上传时间：{{data.information.create_time}}</p>
                  </div>
                </el-row>
                <el-row>
                  <div class="new-title">
                    <span>资源简介</span>
                  </div>
                  <div class="pan introduction">
                    <el-row>
                      <el-col :span="8">
                        <img :src="data.introduction.cover" alt />
                      </el-col>
                      <el-col :span="16">
                        <p>{{data.introduction.title}}</p>
                        <p class="pf">
                          <span>评分：</span>
                          <el-rate
                            v-model="data.introduction.rates"
                            disabled
                            show-score
                            text-color="#ff9900"
                            score-template="{value}"
                          ></el-rate>
                        </p>
                        <p class="introduce">
                          <span>简介：</span>
                          {{data.introduction.description}}
                        </p>
                      </el-col>
                    </el-row>
                  </div>
                </el-row>
                <el-row>
                  <div class="new-title">
                    <span>相关资源</span>
                  </div>
                  <div class="pan related">
                    <el-collapse v-model="active" accordion v-if="data.relevant.length!=0">
                      <el-collapse-item
                        v-for="(v,index) in data.relevant"
                        :name="index+1"
                        :key="index"
                      >
                        <template slot="title">
                          <el-tag type="warning" effect="dark">{{index+1}}</el-tag>
                          {{v.title}}
                        </template>
                        <div>
                          <el-row>
                            <el-col :span="8" :offset="2">
                              <img :src="v.cover" alt />
                            </el-col>
                            <el-col :span="14">
                              <p>{{v.title}}</p>
                              <p class="pf">
                                <span>评分：</span>
                                <el-rate
                                  v-model="v.rates"
                                  disabled
                                  show-score
                                  text-color="#ff9900"
                                  score-template="{value}"
                                ></el-rate>
                              </p>
                              <el-button round>{{v.category_name}}</el-button>
                            </el-col>
                          </el-row>
                        </div>
                      </el-collapse-item>
                    </el-collapse>
                    <div v-else>
                      暂无资源
                    </div>
                  </div>
                </el-row>
              </el-col>
            </el-row>
          </el-tab-pane>
        </el-tabs>
      </template>
    </el-col>
  </el-row>
</template>
<script>
import store from "../../store";
import { video, comments, addComments } from "@/api/library";
export default {
  name: "cont",
  data() {
    return {
      baseUrl: process.env.BASE_URL,
      value: 5,
      fm: require("@/assets/index/pdf.png"),
      fms: require("@/assets/index/fengmian_s.png"),
      collection: require("@/assets/index/collection.png"),
      liulan: require("@/assets/index/read.png"),
      pinglun: require("@/assets/index/talk.png"),
      activeName: "first",
      title: "",
      state: "state",
      fileType: "pdf", // 文件类型
      src: "",
      activeIndex: 0,
      intnum: undefined,
      active: "1",
      textarea: "",
      children: null,
      parents: null,
      somebody1: "",
      somebody2: "",
      msg: "",
      msgChild: "",
      more: false,
      data: {},
      form: {
        id: this.$route.query.id,
      },
      content: "",
      talk: {
        page: 1,
        page_size: 3,
        fid: null,
        type: 1,
      },
      talks: [],
    };
  },
  created() {
    this.fentch();
  },

  methods: {
    // 获取数据
    fentch() {
      this.listLoading = true;
      let params = this.form;
      video(params).then((response) => {
        let data = response.data;
        this.src = `${this.baseUrl}web/viewer.html?file=${this.baseUrl}${data.resources.path}`;
        this.data = data;
        this.listLoading = false;
      });
    },
    // 发表评论
    published() {
      let data = {
        reply: 2,
        id: Number(this.form.id),
        content: this.content,
        type: 1,
      };
      addComments(data).then((response) => {
        if (response.code == 1) {
          this.$message({
            type: "success",
            message: "评论成功",
          });
          this.content = "";
          this.showMore();
        }
      });
    },
    select(index) {
      this.active = index;
    },
    hf1(index1) {
      if (this.data.comment == 0) {
        this.parents = this.talks[index1].id;
      } else {
        this.parents = this.data.comment[index1].id;
      }
    },
    hf2(index1, index2) {
      if (this.data.comment == 0) {
        this.children = this.talks[index1].children[index2].id;
      } else {
        this.children = this.data.comment[index1].children[index2].id;
      }
    },
    // 取消回复
    qx1(index1) {
      this.parents = null;
    },
    // 取消回复
    qx2(index2) {
      this.children = null;
    },
    qd1(index1) {
      let data = {
        reply: 1,
        id: Number(this.form.id),
        content: this.msg,
        type: 1,
        comment_id: null,
      };
      if (this.data.comment == 0) {
        data.comment_id = this.talks[index1].id;
      } else {
        data.comment_id = this.data.comment[index1].id;
      }

      addComments(data).then((response) => {
        if (response.code == 1) {
          this.$message({
            type: "success",
            message: "回复成功",
          });
          this.msg = "";
          this.parents = null;
          this.showMore();
        }
      });
      this.response = false;
    },
    qd2(index1, index2) {
      let data = {
        reply: 1,
        id: Number(this.form.id),
        content: this.msgChild,
        type: 1,
        comment_id: this.data.comment[index1].children[index2].id,
      };
      if (this.data.comment == 0) {
        data.comment_id = this.talks[index1].children[index2].id;
      } else {
        data.comment_id = this.data.comment[index1].children[index2].id;
      }

      addComments(data).then((response) => {
        if (response.code == 1) {
          this.$message({
            type: "success",
            message: "回复成功",
          });
          this.msgChild = "";
          this.children = null;
          this.showMore();
        }
      });
      this.response = false;
    },
    showMore() {
      this.more = true;
      this.talk.fid = Number(this.form.id);
      let params = this.talk;
      comments(params).then((response) => {
        this.talks = response.data;
        this.total=response.total
      });
    },
    handleCurrentChange(val) {
      this.talk.page=val
       this.showMore()
      }
  },
};
</script>
<style lang="scss" scoped>
.right-main {
  position: relative;
  padding-left: 25px !important;
}
.fm {
  width: 100%;
}
.content {
  padding: 20px;
  text-align: center;
  border: 1px solid rgba(222, 222, 222, 1);
  border-radius: 10px;
}
.title {
  font-size: 26px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: rgba(255, 255, 255, 1);
  text-align: left;
}
.news {
  padding: 30px 0;
}
.where {
  position: absolute;
  right: 0;
  top: 0;
  font-size: 18px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: rgba(142, 142, 142, 1);
}
.tab {
  text-align: right;
  margin-top: 0px;
  border-right: 1px solid #e4e4e4;
  li {
    display: inline-block;
    padding: 12px 30px;
    border-left: 1px solid #e4e4e4;
    border-bottom: 1px solid #e4e4e4;
    font-size: 20px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: rgba(79, 79, 79, 1);
    cursor: pointer;
  }
  li:hover {
    color: #1ca2a7 !important;
  }
  .active {
    color: #1ca2a7 !important;
    border-bottom: 0px solid #ddd;
  }
}
.point {
  span {
    float: left;
  }
}
.info {
  position: relative;
  > span {
    position: absolute;
    left: 0;
    top: 6px;
  }
}
.name {
  font-size: 24px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: rgba(22, 22, 22, 1);
  margin-top: 0;
}
.icon {
  padding-top: 40px;
}
.list {
  padding-top: 30px;
  img {
    margin-left: 0;
  }
}
.list-li {
  padding-bottom: 30px;
}
.icon {
  font-size: 18px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: rgba(142, 142, 142, 1);
  img {
    margin-right: 10px;
  }
}
.new-title {
  font-size: 22px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: rgba(37, 37, 37, 1);
  border-bottom: 2px solid #e4e4e4;
  span {
    display: inline-block;
    position: relative;
    padding-bottom: 14px;
  }
  span::after {
    display: inline-block;
    content: "";
    position: absolute;
    bottom: -2px;
    left: 0;
    background-color: #1ba1a7;
    width: 96px;
    height: 2px;
  }
}
.pan {
  background: rgba(255, 255, 255, 1);
  border: 1px solid rgba(219, 219, 219, 1);
  box-shadow: 0px 2px 10px 0px rgba(153, 153, 153, 0.23);
  border-radius: 10px;
  margin: 20px 0;
  font-size: 20px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: rgba(79, 79, 79, 1);
  padding: 20px;
  p {
    padding: 8px 0;
    margin: 0;
  }
}
.pf {
  span {
    float: left;
    color: #8d8d8d;
  }
}
.introduce {
  span {
    color: #8d8d8d;
  }
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  padding: 0 !important;
}
.comments {
  padding: 30px;
  margin: 30px 0;
  background: rgba(249, 249, 249, 1);
  border-radius: 10px;
}
.all {
  text-align: left;
  p {
    margin: 0;
    padding-bottom: 15px;
  }
}
.person {
  font-size: 20px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: rgba(27, 161, 167, 1);
  display: inline-block;
  padding: 0 14px;
}
.more {
  text-align: center;
  cursor: pointer;
  font-size: 22px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: rgba(37, 37, 37, 1);
  padding: 20px 0 0 0;
}
.pl-list {
  border-bottom: 1px solid rgba(235, 235, 235, 1);
  padding: 14px 0;
}
.more-total {
  text-align: center;
  padding: 100px 0 20px 0;
}
.center {
  display: flex;
  align-items: center;
}
.state {
  color: #1ca2a7;
}
.introduction {
  img {
    width: 90%;
  }
}
.message {
  padding-bottom: 14px;
}
video{
  width: 100%;
}
</style>
<style lang="scss">
.pain .el-tabs__item.is-active {
  font-size: 22px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: rgba(37, 37, 37, 1);
}
.pain .el-tabs__active-bar {
  background-color: #1ca2a7;
}
.pain .el-tabs__item {
  height: 50px;
  line-height: normal;
}
.pain .el-tabs__header {
  margin: 0;
}
.info .el-button {
  border: none;
  padding: 0;
  width: 100%;
  line-height: 30px;
  white-space: normal;
  text-align: left;
  text-indent: 45px;
  span {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    font-size: 20px;
    color: #4f4f4f;
  }
}
.info {
  .el-button:hover {
    background: none;
  }
}
.el-collapse {
  border: none;
}
.el-collapse-item__header {
  font-size: 20px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: rgba(21, 21, 21, 1);
}
.right-box .el-button,
.all .el-button,
.comments .el-button {
  background: rgba(27, 161, 167, 1);
  height: 30px;
  line-height: 30px;
  padding: 0 20px;
  color: rgba(255, 255, 255, 1);
}
.related {
  .el-tag {
    margin-right: 14px;
  }
  img{
    width: 90%;
  }
}
.talk {
  .el-button {
    color: #409eff;
    background: 0 0;
    border: none;
  }
}
.total{
  text-align: center;
  padding-top: 30px;
}
</style>